<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./iscroll.js"></script>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 注意：要在mounted钩子函数中，初始化iScroll对象 -->
    <style>
        * {
            margin: 0px;

        }

        ul {
            list-style-type: none;
        }

        #myScroll {
            border: 1px solid #0094ff;
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
    </style>

    <button id="btn">新增数据项</button>
    <input type="text" v-model="usrStr">
    <div id="app">
        <div id="myScroll">
            <ul>
                <li v-for="(item,index) in list" :key="index">{{item + '-' + index}}</li>

            </ul>
        </div>

    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                usrStr: '',
                myScro: null,
                list: [1, 2, 3, 4, , 5, 6, 7, 8]
            },
            methods: {
                //利用add方法新增列表项时：
                add() {
                    this.list.push(this.usrStr)
                    //突发问题：明明已经调用了refresh方法，但是容器并没有增加高度
                    //分析问题：当我们将数据添加到list中，vue框架会监控到并立即添加列表dom对象，
                    //         但这个过程需要时间，与此同时，下面的refresh方法已经执行了
                    //方案2：
                    // setTimeout(() => {
                    //     this.myScro.refresh()
                    // }, 2)
                    //方案3：使用$nextTick来触发执行refresh方法
                    this.$nextTick(() => {
                        this.myScro.refresh()
                    })
                }
            },
            mounted() {
                this.myScro = new IScroll(this.$refs.myS, {
                    mouseWheel: true,
                    scrollbars: true
                })
            },
            //解决方案1：
            //缺点：一旦data中有数据改变就会触发dom渲染，进而调用updated钩子函数
            uodated() {
                this, myScro.refresh()
            }
            //解决方案2：
            //利用setTimeout等待一会，再执行refresh方法
        })


    </script>

</body>

</html>